<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>有货</title>
	<link rel="stylesheet" type="text/css" href="./org/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
	<!-- <script src="./org/bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> -->
	<script type="text/javascript" src="./Js/jquery-1.8.2.min.js"></script>
	<link rel="stylesheet" href="./Swiper-3.3.1/dist/css/swiper.min.css">
	<script type="text/javascript" src="./Swiper-3.3.1/dist/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="./Swiper-3.3.1/dist/js/swiper.min.js"></script>
	<link rel="stylesheet" href="./Css/index.css">
	<link rel="stylesheet" href="./Css/common.css">
	<script type="text/javascript" src="./Js/index.js"></script>
	<link rel="stylesheet" href="./Css/list.css">
	<script type="text/javascript" src="./Js/list.js"></script>
	<link rel="stylesheet" href="./Css/show.css">
	<script type="text/javascript" src="./Js/show.js"></script>
</head>
<body>
<header>
	<!-- 最顶部宣传 -->
	<div id="_top">
		<a href=""></a>
	</div>

	<!-- 登录注册版块 -->
	<div id="_login">
		<div class="_login-total">
			<div class="_login-left">
				<span class="_icon"></span>
				<a href="">YOHO!BUY 有货</a>
				<ul class="_left-list">
					<li> 
						<a class="yoho-group" data-cn="集团官网" data-en="YOHO!" href="">YOHO!</a>
					</li>
					<li>
						<a class="yoho-group" data-cn="男生潮流" data-en="YOHO!BOYS" href="">YOHO!BOYS</a>
					</li>
					<li>
						<a class="yoho-group" data-cn="女生潮流" data-en="YOHO!GIRLS" href="">YOHO!GIRLS</a>
					</li>
					<li>
						<a class="yoho-group" data-cn="物趣分享" data-en="YOHO!SHOW" href="">YOHO!SHOW</a>
					</li>
					<li>
						<a class="yoho-group" data-cn="潮流嘉年华" data-en="YO'HOOD" href="">YO'HOOD</a>
					</li>
				</ul>
			</div>
			<div class="_login-right">
				<ul>
					<li id="login-box">
						<span class="hi">hi~</span>
						[
						<a href="" class="loginbar">请登录</a>
						]
						[
						<a href="" class="registebar">免费注册</a>
						]
					</li>
					<li id="myYohoBox" class="myyoho">
						<span class="tag-seprate">|</span>
						<a href="">MY有货</a>
						<span class="icon-bottomarrow"></span>
						<div class="simple-user-center"></div>
					</li>
					<li class="myOrder">
						<span class="tag-seprate">|</span>
						<span class="icon-papers"></span>
						<a href="">我的订单</a>
					</li>
					<li class="mycollect">
						<span class="tag-seprate">|</span>
						<span class="icon-heart"></span>
						<a href="">我的收藏</a>
					</li>
					<li class="message">
						<span class="tag-seprate">|</span>
						<span class="icon-mail"></span>
						<a href="">消息</a>
					</li>
					<li class="phoneapp">
						<span class="tag-seprate">|</span>
						<span class="icon-phone"></span>
						<a href="">手机版</a>
						<div class="download-app-box">
							<div class="qr-img">
								<img src="./Images/qr.png" alt="">
							</div>
							<h3 class="qr-words">扫描二维码</h3>
							<h3 class="qr-words">下载有货手机客户端</h3>
							<h3 class="qr-more"><a href="">更多客户端下载</a></h3>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 搜索栏(男生) -->
	<div id="head-wrapper">
		<div class="head-wrapper-cate">
			<ul>
				<li class="head-list-cur">
					<a href="" class="head-list-cur">
						<span class="name-cn">男生</span>
						<span class="name-en">BOYS</span>
					</a>
				</li>
				<li>
					<a href="">
						<span class="name-cn girls-cur">女生</span>
						<span class="name-en">GIRLS</span>
					</a>
				</li>
				<li>
					<a href="">
						<span class="name-cn">潮童</span>
						<span class="name-en">KIDS</span>
					</a>
				</li>
				<li>
					<a href="">
						<span class="name-cn">创意生活</span>
						<span class="name-en">LIFE STYLE</span>
					</a>
				</li>
			</ul>
			<div class="head-search">
				<!-- logo显示区中间部分 -->
				<div class="head-logo">
					<img src="./Images/logo/logo_e.png" alt="">
				</div>
				<div class="head-search-right">
					<input type="text" name="" id="search">
					<input type="submit" value="" class="search-submit">
					<div class="head-shop-car">
						<span class="head-shop-img">0</span>
						<div class="head-car-hide">
							<!-- 这儿开始循环商品列 -->
							<div class="head-goods-list">
								<img src="./Images/logo/62.jpg" alt="">
								<div class="head-goods-info">
									<p class="goods-info-in">DOPE PLUS K 字母卡通...</p>
									<p>颜色：灰色 尺码：L</p>
								</div>
								<div class="head-goods-price">
									<p>119×1</p>
									<p class="goods-del">删除</p>
								</div>
							</div>
							<!-- 循环结束 -->
							<div class="head-goods-list">
								<img src="./Images/logo/62.jpg" alt="">
								<div class="head-goods-info">
									<p class="goods-info-in">DOPE PLUS K 字母卡通...</p>
									<p>颜色：灰色 尺码：L</p>
								</div>
								<div class="head-goods-price">
									<p>119×1</p>
									<p class="goods-del">删除</p>
								</div>
							</div>
							<div class="head-goods-list">
								<img src="./Images/logo/62.jpg" alt="">
								<div class="head-goods-info">
									<p class="goods-info-in">DOPE PLUS K 字母卡通...</p>
									<p>颜色：灰色 尺码：L</p>
								</div>
								<div class="head-goods-price">
									<p>119×1</p><!-- 这儿填写的是价格和数量，可以直接写入就行了 -->
									<p class="goods-del">删除</p>
								</div>
							</div>
							<div class="head-goods-list">
								<img src="./Images/logo/62.jpg" alt="">
								<div class="head-goods-info">
									<p class="goods-info-in">DOPE PLUS K 字母卡通...</p>
									<p>颜色：灰色 尺码：L</p>
								</div>
								<div class="head-goods-price">
									<p>119×1</p><!-- 这儿填写的是价格和数量，可以直接写入就行了 -->
									<p class="goods-del">删除</p>
								</div>
							</div>
							<div class="head-goods-list">
								<img src="./Images/logo/62.jpg" alt="">
								<div class="head-goods-info">
									<p class="goods-info-in">DOPE PLUS K 字母卡通...</p>
									<p>颜色：灰色 尺码：L</p>
								</div>
								<div class="head-goods-price">
									<p>119×1</p><!-- 这儿填写的是价格和数量，可以直接写入就行了 -->
									<p class="goods-del">删除</p>
								</div>
							</div>
							<!-- 循环结束点 -->
							<div class="head-goods-pay">
								<a href="">去购物车结算</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="head-list">
		<div class="head-list-name">
			<ul class="boys">
				<li><a href="">新品到着</a></li>
				<li><a href="">品牌一览</a></li>
				<li><a href="">服饰</a></li>
				<li><a href="">鞋履</a></li>
				<li><a href="">包袋</a></li>
				<li><a href="">配饰 · 其他</a></li>
				<li><a href="">领券中心</a></li>
				<li><a href="">逛</a></li>
				<li><a href="">SALE</a></li>       
			</ul>
		</div>
	</div>
	<div id="third-nav-wrapper">
		<div class="nav-center-content">
			<div class="nav-total-left">
				<p class="nav-tops">上装</p>
				<a>T恤</a>
				<a>POLO</a>
				<a>背心</a>
				<p class="nav-tops">上装</p>
				<a>T恤</a>
				<a>POLO</a>
				<a>背心</a>
				<a>背心</a>
				<p class="nav-tops">上装</p>
			</div>
			<div class="nav-total-left nav-total-middle">
				<p class="nav-tops">上装</p>
				<a>T恤</a>
				<a>POLO</a>
				<a>背心</a>
				<p class="nav-tops">上装</p>
				<a>T恤</a>
				<a>POLO</a>
				<p class="nav-tops">上装</p>
				<a>背心</a>
				<a>背心</a>
			</div>
			<div class="nav-total-left nav-total-right">
				<p class="nav-tops">上装</p>
				<a>T恤</a>
				<a>POLO</a>
				<a>背心</a>
				<p class="nav-tops">上装</p>
				<a>T恤</a>
				<a>POLO</a>
				<p class="nav-tops">上装</p>
				<a>背心</a>
				<a>背心</a>
			</div>
			<div class="nav-total-right-img">
				<img src="./Images/logo/3.jpg" alt="">
				<a href="">IN季新品全面开售</a>
			</div>
		</div>			
	</div>
</header>

<!-- 中部内容 -->
<article>
	<div id="brand-banner">
		<div class="brand-top">
			<a href="" class="brand-left">
				<img src="./Images/show/1.jpg" alt="">
			</a>
			<a href="" class="brand-right">
				<span class="BRimg"></span>
				<span class="BRimg2"></span>
			</a>
		</div>
	</div>
	<div id="content-all">
		<div id="_list-top">
			<a href="">BOYS首页</a>
			<span>></span>
			<a href="">BOYS首页</a>
			<span>></span>
		</div>
	</div>	
	<div id="_show-total">
		<div class="_show">
			<div class="_show-left-more">
				<!-- 循环点开始大图的循环 对应下面的选颜色图片-->
				<div class="_show-left">
					<!-- 左边大图的显示 -->
					<div class="_show-big">
						<img src="./Images/show/4.jpg" alt="">
						<img src="./Images/show/5.jpg" alt="">
					</div>
					<!-- 中间缩略图的显示 -->
					<div class="_show-thumb">
						<img src="./Images/show/41.jpg" alt="">
						<img src="./Images/show/51.jpg" alt="">
					</div>
				</div>
				<!-- 循环点结束 -->
				<div class="_show-left">
					<!-- 左边大图的显示 -->
					<div class="_show-big">
						<img src="./Images/show/6.jpg" alt="">
						<img src="./Images/show/7.jpg" alt="">
						<img src="./Images/show/8.jpg" alt="">
					</div>
					<!-- 中间缩略图的显示 -->
					<div class="_show-thumb">
						<img src="./Images/show/61.jpg" alt="">
						<img src="./Images/show/71.jpg" alt="">
						<img src="./Images/show/81.jpg" alt="">
					</div>
				</div>
			</div>	
			<div class="_show-right">
				<p class="_show-name">
					<span class="_show-list-name">DOPE PLUS K 字母卡通印花短袖T恤</span>
					<span class="sale-tip">春潮新势力</span>
				</p>
				<a class="brand-name" href="">DOPE PLUS K</a>
				<p class="market-price">
					<span class="market-title">市场价：</span>
					<span class="has-other-price">¥249.00</span>
				</p>
				<p class="sale-price">
					<span class="sale-title">促销价：</span>
					<span class="sale-price">¥119.00</span>
				</p>
				<ul class="activity">
					<li>
						<a class="img-link" href="">
							<img src="./Images/show/4.png">
						</a>
					</li>
					<li>
						<span class="ac-type">满减</span>
						<span class="ac-des">【IN品特享】5折封顶 折后满￥399再减￥50</span>
					</li>
					<li>
						<span class="ac-type">加价购</span>
						<span class="ac-des"> 全场￥99加价购</span>
					</li>
					<li>
						<span class="ac-type">加价购</span>
						<span class="ac-des"> 全场￥49加价购</span>
					</li>
					<li>
						<span class="ac-type">加价购</span>
						<span class="ac-des"> 全场￥29加价购</span>
					</li>
				</ul>
				<div class="trade-content-line"></div>
				<div class="type-chose">
					<div class="chose-color">
						<span class="pull-left">选颜色：</span>
						<ul class="colors">
							<!-- 这儿的循环对应上面大图对的循环 -->
							<li class="pull-left-img focus">
								<img src="./Images/show/42.jpg" alt="">
							</li>
							<li class="pull-left-img">
								<img src="./Images/show/62.jpg" alt="">
							</li>
						</ul>
					</div>
					<div class="chose-size">
						<span class="pull-left">选尺码：</span>
						<div id="sizes">
							<ul class="size">
								<li data-name="S" data-num="21" data-sku="1015862">S</li>
								<li data-name="M" data-num="30" data-sku="1015863">M</li>
								<li data-name="L" data-num="24" data-sku="1015864">L</li>
								<li data-name="XL" data-num="14" data-sku="1015865">XL</li>
								<span class="size-ruler"></span>
							</ul>
							<p class="color-size-tip">胸围 <span>112</span>cm / 肩宽 <span>48</span>cm</p>
						</div>
					</div>
					<div class="chose-count">
						<span class="pull-left">选数量：</span>
						<div class="num-wraper">
							<span id="num" class="num pull-left">1</span>
							<span class="minus-plus">
								<i id="plus-num" class="chose-plus"></i>
								<i id="minus-num" class="chose-minus"></i>
							</span>
						</div>
					</div>	
					<p class="add-shop-car">
						<span class="buy-btn">添加到购物车</span>
						<span class="collect-product">收藏商品</span>
					</p>
					<div class="share-row">
						<span class="pull-left">分享商品：</span>
						<span class="share-to">
							<i class="weibo" title="分享到新浪微博" data-type="weibo">1</i>
							<i class="weixin" title="分享到微信朋友圈" data-type="weixin">2</i>
							<i class="tweibo" title="分享到腾讯微博" data-type="tweibo">3</i>
							<i class="qzone" title="分享到QQ空间" data-type="qzone">4</i>
							<i class="qq" title="分享到QQ好友" data-type="qq">5</i>
							<i class="renren" title="分享到人人" data-type="renren">6</i>
							<i class="douban" title="分享到豆瓣" data-type="douban">7</i>
						</span>
					</div>
				</div>
				<!-- 隐藏域 -->
				<div class="balance">
					<p class="success-tip">商品已成功添加到购物车！</p>
					<p class="cart-total">
						购物车一共有
						<span id="cart-num">2</span>
						件商品
					</p>
					<p class="balance-btns">
						<a class="balance-go-cart" href="">去购物车结算</a>
						<span id="keep-shopping" class="keep-shopping">继续购物</span>
					</p>
				</div>
				<!-- 隐藏域结束 -->
			</div>
		</div>
	</div>
	<div id="other-infos">
		<p class="block-title">
			<span class="title block-title-cur">商品信息 DESCRIPTION</span>
			<span class="sep">|</span>
			<span class="title">材质洗涤 MATERIALS</span>
		</p>
		<div class="description-content">
			<ul class="basic">
				<li> 编号: 51285706 </li>
				<li>颜色:
					<span id="desc-color">紫色</span>
				</li>
				<li> 性别: 男款 </li>
				<li> 领型: 圆领 </li>
				<li> 衣长: 适中 </li>
				<li> 袖长: 短袖 </li>
				<li> 版型: 正常 </li>
				<li> 厚度: 中 </li>
				<li> 经典款型: LOGOT恤 </li>
			</ul>
			<ul class="comfort">
				<li class="pull-left">
					<span class="comfort-title">弹性：</span>
					<span class="min-des">小</span>
					<span class="comfort-block "></span>
					<span class="comfort-block cur"></span>
					<span class="comfort-block "></span>
					<span class="comfort-block "></span>
					<span class="comfort-block "></span>
					<span class="max-des">大</span>
				</li>
				<li class="pull-left">
					<span class="comfort-title">厚度：</span>
					<span class="min-des">薄</span>
					<span class="comfort-block "></span>
					<span class="comfort-block "></span>
					<span class="comfort-block cur"></span>
					<span class="comfort-block "></span>
					<span class="comfort-block "></span>
					<span class="max-des">厚</span>
				</li>
				<li class="pull-left">
					<span class="comfort-title">柔软度：</span>
					<span class="min-des">软</span>
					<span class="comfort-block "></span>
					<span class="comfort-block cur"></span>
					<span class="comfort-block "></span>
					<span class="comfort-block "></span>
					<span class="comfort-block "></span>
					<span class="max-des">硬</span>
				</li>
				<li class="pull-left">
					<span class="comfort-title">透气性：</span>
					<span class="min-des">弱</span>
					<span class="comfort-block "></span>
					<span class="comfort-block "></span>
					<span class="comfort-block cur"></span>
					<span class="comfort-block "></span>
					<span class="comfort-block "></span>
					<span class="max-des">强</span>
				</li>
			</ul>
		</div>
	</div>
</article>
</body>
</html>